<template>
  <div class="info-content" key="previewRule">
    <div class="page-main-title">收费规则</div>
    <div class="info-main-content">
      <div class="tab">
        <div
          class="tab-item"
          :class="{active: currentTab === item}"
          v-for="(item, index) in tabData"
          @click="changeTab(item)"
        >{{ item }}</div>
      </div>
      <div class="main-content" v-if="parkBaseInfo">
        <div v-show="currentTab === '基本收费规则'">
          <el-form
            :model="parkBaseInfo"
            ref="parkBaseInfo"
            label-width="120px"
            size="small"
            :disabled="true"
            class="zb-form rule-form zb-disabled-form"
            label-position="left"
            style="margin-bottom: 10px"
          >
            <div class="el-form--inline zb-inline-form rule-inline-form top-bd">
              <el-form-item label="缴费后离场时限" label-width="125px" class="input-width-control">
                <span>{{parkBaseInfo.timeoutLength}}</span>
                <span class="unit">分钟</span>
              </el-form-item>

              <a
                href="javascript:;"
                class="top-action-btn"
                @click="linkToEditPic"
                v-if="isPermmited('PARK:CONFIG:MANAGE:CHARGE_RULE:UPDATE')"
              >
                <i class="icon-edit"></i> 编辑
              </a>

              <a href="javascript:;" class="top-show-pic">查看规则图片</a>

              <div class="preview-rule-img">
                <el-image
                  style="width: 420px"
                  :src="domain + parkBaseInfo.chargeRulePicUrl"
                  fix="contain"
                ></el-image>
              </div>
            </div>
          </el-form>
          <div class="top-action" v-if="isPermmited('PARK:CONFIG:MANAGE:CHARGE_RULE:UPDATE')">
            <a href="javascript:;" class="add-icon" @click="addRuleGroup">
              <i class="el-icon-circle-plus"></i> 新增收费规则
            </a>
          </div>
          <el-form
            :model="pageChargeList"
            ref="pageChargeList"
            label-width="120px"
            size="small"
            :disabled="true"
            label-position="left"
            class="zb-form rule-form zb-disabled-form"
            v-for="(parkChargeBaseVoListItem, parkChargeBaseVoListItemIndex) in pageChargeList.parkChargeBaseVoList"
            :key="parkChargeBaseVoListItemIndex"
          >
            <div class="charge-rule">
              <div class="rule-top" :class="{'is-hide': !parkChargeBaseVoListItem.uiOpt.isShow}">
                <div class="title">
                  {{parkChargeBaseVoListItem.typeName}}
                  <div class="open-status" v-if="parkChargeBaseVoListItem.isDefault">默认</div>
                </div>
                <div class="action">
                  <a
                    href="javascript:;"
                    class="action-bar-item rmb"
                    @click="calc(parkChargeBaseVoListItem)"
                  >
                    <i class="icon-rmb"></i>测算
                  </a>
                  <template v-if="isPermmited('PARK:CONFIG:MANAGE:CHARGE_RULE:UPDATE')">
                    <a
                      href="javascript:;"
                      class="action-bar-item"
                      @click="editRule(parkChargeBaseVoListItem.chargeTypeSeq)"
                    >
                      <i class="icon-edit"></i>编辑
                    </a>
                    <a
                      href="javascript:;"
                      class="action-bar-item del"
                      @click="delRuleGroup(parkChargeBaseVoListItem)"
                    >
                      <i class="icon-ic_btn_delete"></i>删除
                    </a>
                  </template>

                  <div
                    class="show-rule-detail-icon"
                    @click="expandAndCollapse(parkChargeBaseVoListItem, pageChargeList.parkChargeBaseVoList)"
                  >
                    <i
                      class="el-icon-caret-bottom"
                      :class="{rotate180:parkChargeBaseVoListItem.uiOpt.isShow}"
                    ></i>
                  </div>
                </div>
              </div>
              <el-collapse-transition>
                <div class="charge-content" v-show="parkChargeBaseVoListItem.uiOpt.isShow">
                  <div
                    class="charge-type-tab"
                    v-if="parkChargeBaseVoListItem.isFree === '收费车场' && parkChargeBaseVoListItem.uiOpt.ruleCarType === '区分'"
                  >
                    <a
                      href="javascript:;"
                      class="tab-item"
                      v-for="item in parkChargeBaseVoListItem.uiOpt.carTypeOpt"
                      :key="item.value"
                      :class="{active: parkChargeBaseVoListItem.uiOpt.curCarType === item.value}"
                      @click="parkChargeBaseVoListItem.uiOpt.curCarType = item.value"
                    >{{item.name}}</a>
                  </div>
                  <div class="charge-rule-item">
                    <div class="charge-rule-item-bd">
                      <div
                        class="top"
                        style="margin-bottom: 20px"
                        v-if="parkChargeBaseVoListItem.isFree === '免费车场'"
                      >
                        <div class="top-item">免费车场</div>
                      </div>

                      <template
                        v-if="parkChargeBaseVoListItem.isFree === '收费车场' && (parkChargeBaseVoListItem.uiOpt.ruleCarType === '不区分' || parkChargeBaseVoListItem.uiOpt.ruleCarType === '区分' && parkChargeBaseVoListItem.uiOpt.curCarType === parkChargeStandardVoListItem.carType)"
                        v-for="(parkChargeStandardVoListItem, parkChargeStandardVoListIndex) in parkChargeBaseVoListItem.parkChargeStandardVoList"
                      >
                        <div class="top">
                          <div
                            class="top-item"
                          >免费时长：{{ parkChargeStandardVoListItem.freeTime }}分钟 {{ parkChargeStandardVoListItem.freeTimeAcc ? '（列入计费)' : '' }}</div>
                        </div>
                        <!-- 不分时段 start -->
                        <div
                          class="rule-types-box"
                          v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '不分时段'"
                          v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList"
                          :class="{ qufen: parkChargeBaseVoListItem.uiOpt.ruleCarType === '区分' && TimeRuleItem.uiOpt.curRuleType === '递增收费' }"
                        >
                          <div
                            class="type-1"
                            v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'"
                            v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                          >{{ruleItemDetailItem.chargeAmount}}元/次</div>
                          <!-- <div
                            class="type-2"
                            v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'"
                            v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                          >
                            <div
                              class="rule-detail-item"
                            >每{{ruleItemDetailItem.chargeUnit}}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                            <div
                              class="settlement noRange"
                            >{{TimeRuleItem.mxSettleType | mxSettleType}}</div>
                          </div>-->

                          <div
                            class="type-2"
                            v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                            v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'"
                          >
                            <div class="type-2-top">
                              <div
                                class="rule-detail-item"
                              >每{{ ruleItemDetailItem.chargeUnit }}分钟{{ ruleItemDetailItem.chargeAmount }}元</div>
                              <div
                                class="price-limit"
                                v-if="TimeRuleItem.uiOpt.isMaxCharge"
                              >封顶{{ TimeRuleItem.maxCharge }}元</div>

                              <div
                                class="settlement"
                                :class="{noDing: !TimeRuleItem.uiOpt.isMaxCharge}"
                              >{{TimeRuleItem.mxSettleType | mxSettleType}}</div>
                            </div>
                          </div>

                          <div
                            class="type-3"
                            v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'"
                            :style="{padding: parkChargeBaseVoListItem.uiOpt.ruleCarType === '不区分' ? '15px 0' : '0'} "
                          >
                            <div class="type-3-top">
                              <div
                                class="settlement"
                                :style="{ marginLeft:  TimeRuleItem.uiOpt.isMaxCharge ? '20px' : '0'}"
                              >{{TimeRuleItem.mxSettleType | mxSettleType}}</div>
                            </div>
                            <div class="type-3-bd">
                              <div class="mask mask-top"></div>
                              <div class="mask mask-bottom"></div>
                              <template
                                v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                              >
                                <div
                                  class="type-3-top-item"
                                  v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                >
                                  <div class="left-info-item">
                                    <div
                                      class="rule-detail-item"
                                    >首{{ruleItemDetailItem.chargeUnit}}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                  </div>
                                </div>
                                <div
                                  class="type-3-middle-item"
                                  v-if="TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges && TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges.length && dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1 && dindex <= 6 && !TimeRuleItem.uiOpt.isShowMore"
                                >
                                  <div
                                    class="xunhuan-item"
                                  >{{ ruleItemDetailItem.chargeUnit }}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                </div>

                                <div
                                  class="type-3-middle-item"
                                  v-if="TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges && TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges.length && dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1  && TimeRuleItem.uiOpt.isShowMore"
                                >
                                  <div
                                    class="xunhuan-item"
                                  >{{ ruleItemDetailItem.chargeUnit }}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                </div>

                                <div
                                  class="show-more-action"
                                  v-if="ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1 && TimeRuleItem.uiOpt.xunHuanRulesLength >= 7 && dindex === (TimeRuleItem.parkChargeStandardPeriodDetailVoList.length -2)"
                                  @click="TimeRuleItem.uiOpt.isShowMore = !TimeRuleItem.uiOpt.isShowMore"
                                >{{ TimeRuleItem.uiOpt.isShowMore ? '收起' : '展开' }}</div>
                              </template>

                              <div
                                class="type-3-bottom-item"
                                v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                                v-if="ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2"
                              >之后每{{ruleItemDetailItem.chargeUnit}}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                            </div>
                          </div>
                        </div>
                        <!-- 不分时段 end -->
                        <!-- 分时段 start -->
                        <div
                          class="rule-types-box time-range"
                          v-if="parkChargeStandardVoListItem.uiOpt.curSplitTime === '分时段'"
                        >
                          <template
                            v-for="(TimeRuleItem, index) in parkChargeStandardVoListItem.parkChargeStandardPeriodVoList"
                          >
                            <div
                              class="type-1 time-range-item"
                              v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                              v-if="TimeRuleItem.uiOpt.curRuleType === '按次定额收费'"
                            >
                              <div
                                class="time-item"
                              >{{TimeRuleItem.timeArray[0]}}-{{TimeRuleItem.timeArray[1]}}</div>
                              {{ ruleItemDetailItem.chargeAmount }}元／次
                            </div>
                            <div
                              class="type-2 time-range-item"
                              v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                              v-if="TimeRuleItem.uiOpt.curRuleType === '按单价收费'"
                            >
                              <div class="type-2-top">
                                <div
                                  class="time-item"
                                >{{TimeRuleItem.timeArray[0]}}-{{TimeRuleItem.timeArray[1]}}</div>
                                <div
                                  class="rule-detail-item"
                                >每{{ ruleItemDetailItem.chargeUnit }}分钟{{ ruleItemDetailItem.chargeAmount }}元</div>
                                <div
                                  class="price-limit"
                                  v-if="TimeRuleItem.uiOpt.isMaxCharge"
                                >封顶{{ TimeRuleItem.maxCharge }}元</div>

                                <div
                                  class="settlement"
                                  :class="{noDing: !TimeRuleItem.uiOpt.isMaxCharge}"
                                >{{TimeRuleItem.mxSettleType | mxSettleType}}</div>
                              </div>
                            </div>
                            <div
                              class="type-3 time-range-item"
                              v-if="TimeRuleItem.uiOpt.curRuleType === '递增收费'"
                              :style="{ paddingTop:  index === 0 ? '10px' : '12px'}"
                              style="padding-bottom: 15px"
                            >
                              <div class="type-3-top">
                                <div
                                  class="time-item"
                                >{{TimeRuleItem.timeArray[0]}}-{{TimeRuleItem.timeArray[1]}}</div>

                                <div
                                  class="price-limit"
                                  v-if="TimeRuleItem.uiOpt.isMaxCharge"
                                >封顶{{TimeRuleItem.maxCharge}}元</div>

                                <div
                                  class="settlement"
                                  :style="{ marginLeft:  TimeRuleItem.uiOpt.isMaxCharge ? '20px' : '0'}"
                                >{{TimeRuleItem.mxSettleType | mxSettleType}}</div>
                              </div>

                              <div class="type-3-bd">
                                <div class="mask mask-top"></div>
                                <div class="mask mask-bottom"></div>
                                <template
                                  v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                                >
                                  <div
                                    class="type-3-top-item"
                                    v-if="dindex === 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1"
                                  >
                                    <div class="left-info-item">
                                      <div
                                        class="rule-detail-item"
                                      >首{{ruleItemDetailItem.chargeUnit}}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                    </div>
                                  </div>
                                  <div
                                    class="type-3-middle-item"
                                    v-if="TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges && TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges.length && dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1 && dindex <= 6 && !TimeRuleItem.uiOpt.isShowMore"
                                  >
                                    <div
                                      class="xunhuan-item"
                                    >{{ ruleItemDetailItem.chargeUnit }}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                  </div>

                                  <div
                                    class="type-3-middle-item"
                                    v-if="TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges && TimeRuleItem.parkChargeStandardPeriodDetailVoList.fixedCharges.length && dindex !== 0 && ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1  && TimeRuleItem.uiOpt.isShowMore"
                                  >
                                    <div
                                      class="xunhuan-item"
                                    >{{ ruleItemDetailItem.chargeUnit }}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                                  </div>

                                  <div
                                    class="show-more-action"
                                    v-if="ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 1 && TimeRuleItem.uiOpt.xunHuanRulesLength >= 7 && dindex === (TimeRuleItem.parkChargeStandardPeriodDetailVoList.length -2)"
                                    @click="TimeRuleItem.uiOpt.isShowMore = !TimeRuleItem.uiOpt.isShowMore"
                                  >{{ TimeRuleItem.uiOpt.isShowMore ? '收起' : '展开' }}</div>
                                </template>

                                <div
                                  class="type-3-bottom-item"
                                  v-for="(ruleItemDetailItem, dindex) in TimeRuleItem.parkChargeStandardPeriodDetailVoList"
                                  v-if="ruleItemDetailItem.chargeType === 2 && ruleItemDetailItem.stepType === 2"
                                >之后每{{ruleItemDetailItem.chargeUnit}}分钟{{ruleItemDetailItem.chargeAmount}}元</div>
                              </div>
                            </div>
                          </template>
                        </div>
                        <!-- 分时段 end -->
                        <div class="bottom">
                          <div class="bottom-info-item">24小时制</div>
                          <div
                            class="bottom-info-item"
                          >{{parkChargeStandardVoListItem.natureDay | natureDay}} {{ parkChargeStandardVoListItem.natureDay === 1 ? `(起始时间：${parkChargeStandardVoListItem.startTime})` : '' }}</div>
                          <div
                            class="bottom-info-item"
                          >{{ parkChargeStandardVoListItem.loopType | loopType }}</div>
                          <div
                            class="bottom-info-item"
                            v-if="parkChargeStandardVoListItem.uiOpt.isMaxCharge || parkChargeStandardVoListItem.uiOpt.customIsMaxCharge"
                          >
                            <span>{{ parkChargeStandardVoListItem.uiOpt.isMaxCharge ? `24小时封顶: ${parkChargeStandardVoListItem.maxCharge}元 ` : '' }}</span>
                            <span
                              style="margin-left: 20px"
                            >{{ parkChargeStandardVoListItem.uiOpt.customIsMaxCharge ? ` 子封顶: ${parkChargeStandardVoListItem.customMaxUnit}分钟${parkChargeStandardVoListItem.customMaxCharge}元` : '' }}</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </el-form>
        </div>

        <div v-show="currentTab === '特殊收费规则'" class="special-rule-form">
          <template v-if="!isAddingSpecialRule">
            <div class="top-tips">
              <i class="el-icon-warning"></i>
              不支持同时生效多条收费规则，请单独使用！
            </div>
            <div
              class="top-action"
              style="margin-top: 20px; margin-bottom: 15px"
              v-if="isPermmited('PARK:CONFIG:MANAGE:CHARGE_RULE:UPDATE')"
            >
              <a href="javascript:;" class="add-icon" @click="addSpecialRule">
                <i class="el-icon-circle-plus"></i> 新增特殊收费规则
              </a>
            </div>
            <el-form
              label-width="120px"
              size="small"
              class="zb-form rule-form zb-disabled-form"
              :model="parkSpecialChargeVoList"
              ref="parkSpecialChargeVoList"
              label-position="left"
            >
              <div class="special-rule-list">
                <div
                  class="special-rule-item"
                  v-for="(item, index) in parkSpecialChargeVoList.ruleList"
                  :key="index"
                >
                  <div class="rule-top" :class="{'is-hide': !item.isShow}">
                    <div class="title">
                      {{ item.chargeName }}
                      <div class="open-status" v-if="item.enableFlag">启用</div>
                      <div class="open-status close" v-if="!item.enableFlag">未启用</div>
                    </div>
                    <div class="action">
                      <template v-if="isPermmited('PARK:CONFIG:MANAGE:CHARGE_RULE:UPDATE')">
                        <a
                          href="javascript:;"
                          class="action-bar-item"
                          @click="editSpecialRule(item.id)"
                        >
                          <i class="icon-edit"></i>编辑
                        </a>
                        <a
                          href="javascript:;"
                          class="action-bar-item del"
                          @click="delSpecialRule(item)"
                        >
                          <i class="icon-ic_btn_delete"></i>删除
                        </a>
                      </template>

                      <div class="show-rule-detail-icon" @click="item.isShow = !item.isShow">
                        <i class="el-icon-caret-bottom" :class="{rotate180:item.isShow}"></i>
                      </div>
                    </div>
                  </div>
                  <el-collapse-transition>
                    <div class="rule-content" v-show="item.isShow">
                      <div class="el-form--inline zb-inline-form rule-inline-form">
                        <el-form-item label="规则内容">
                          <span>{{item.chargeType | chargeType}}</span>
                        </el-form-item>
                      </div>

                      <div
                        class="el-form--inline zb-inline-form rule-inline-form"
                        v-if="item.chargeType === 1"
                      >
                        <el-form-item label="24小时制">
                          <span>{{item.parkSpecialChargeAllDayTopVo.institutionType | institutionType}}</span>
                        </el-form-item>
                        <!-- 起始时刻 -->
                        <div
                          v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                        >
                          <span>{{item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.startTime}}</span>
                        </div>
                      </div>

                      <div
                        class="el-form--inline zb-inline-form rule-inline-form"
                        v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==0"
                      >
                        <el-form-item label="封顶金额">
                          <span>{{item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopParkingDurationVo.maxValue}}</span>
                          <span class="unit">元</span>
                        </el-form-item>
                      </div>

                      <!-- 自然日 -->
                      <div
                        class="el-form--inline zb-inline-form rule-inline-form"
                        v-else-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                      >
                        <!-- 封顶金额 -->
                        <el-form-item label="封顶金额">
                          <span>{{item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.maxValue}}</span>
                          <span class="unit">元</span>
                        </el-form-item>
                      </div>

                      <div
                        class="naturalDay-sub-list"
                        v-if="item.chargeType === 1 && item.parkSpecialChargeAllDayTopVo.institutionType==1"
                      >
                        <div
                          class="sub-item"
                          v-for="(sitem,sindex) in item.parkSpecialChargeAllDayTopVo.parkSpecialChargeAllDayTopNaturalDayVo.parkSpecialChargeAllDayTopNaturalDaySubTimeVoList"
                        >
                          <div class="item-text">子封顶 {{sindex+1}}</div>
                          <div class="time-slot el-form--inline rule-inline-form">
                            <span>{{sitem.startTime}}</span>
                            <span>~</span>
                            <span>{{sitem.endTime}}</span>
                          </div>
                          <div>
                            <span>，封顶金额</span>
                            <span>{{sitem.maxValue}}</span>
                            <span class="unit">元</span>
                          </div>
                        </div>
                      </div>

                      <div
                        class="el-form--inline zb-inline-form rule-inline-form"
                        v-if="item.chargeType === 5"
                      >
                        <el-form-item label="免费时长">
                          <span>{{item.parkSpecialChargeRepeatShareFreeVo.parkSpecialChargeRepeatShareFreeNaturalDayVo.freeValue}}</span>
                          <span class="unit">分</span>
                        </el-form-item>
                      </div>

                      <div class="el-form--inline zb-inline-form rule-inline-form">
                        <el-form-item label="使用条件">
                          <span
                            style="margin-right:10px"
                          >{{item.parkSpecialChargeServiceConditionVo.serviceConditionType | serviceConditionType}}</span>

                          <template
                            v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType === 1"
                          >
                            <span>包含</span>
                            <span>{{item.parkSpecialChargeServiceConditionVo.serviceConditionValue}}</span>
                          </template>

                          <template
                            v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType == 2"
                          >
                            <span>{{item.parkSpecialChargeServiceConditionVo.serviceConditionValue}}</span>
                          </template>

                          <template
                            v-if="item.parkSpecialChargeServiceConditionVo.serviceConditionType == 3"
                          >
                            <span>{{item.parkSpecialChargeServiceConditionVo.serviceConditionValue | serviceConditionValue}}</span>
                          </template>
                        </el-form-item>
                      </div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>
            </el-form>
          </template>
        </div>
      </div>
    </div>

    <el-dialog
      title="测算-翰天科技城收费组"
      :visible.sync="dialogSetting.ruleCalcDialogShow"
      width="364px"
      class="zb-dialog calc-dialog"
    >
      <div class="dialog-content">
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="80px"
          style="width: 270px; margin-left: 25px;"
          :model="calcOpt"
          ref="calcOpt"
          :rules="calcRules"
        >
          <el-form-item label="车型" v-if="calcOpt.carType !== 0">
            <el-select placeholder="请选择车型" v-model="calcOpt.carType">
              <el-option v-for="item in carTypeOpt" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进场时间" prop="startTime">
            <el-date-picker
              type="datetime"
              v-model="calcOpt.startTime"
              placeholder="选择进场时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="离场时间" prop="endTime">
            <el-date-picker
              type="datetime"
              v-model="calcOpt.endTime"
              placeholder="选择离场时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-form>

        <div class="calc-result" v-if="calcResult">
          <div class="title">测算结果</div>
          <div class="result-list">
            <div class="result-item">
              <div class="result-left-label">时长：</div>
              <div class="result-right-content">{{ calcResult.stoppingTimeStr }}</div>
            </div>

            <div class="result-item">
              <div class="result-left-label">金额：</div>
              <div class="result-right-content">
                <span class="value">{{ calcResult.fee }}</span> 元
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitCalc">测 算</el-button>
        <el-button size="medium" plain @click="dialogSetting.ruleCalcDialogShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageScript from "./RulePreview.js";
export default pageScript;
</script>


<style lang="less">
@import "../../../../assets/less/base/zbForm.less";
.calc-dialog {
  .el-form-item {
    .el-select {
      width: 100%;
    }
    .el-input {
      width: 100% !important;
    }
  }
}
</style>

<style lang="less" scoped>
@import "./RulePreview.less";
@import "../../AddParkingLot/AddParkingLotComponents/FormContent.less";
</style>



